<style lang="less">
	page{
		background: #f6f6f6;
	}
	.pos {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 1000;
	  overflow: hidden;
	  border-bottom: 1upx solid #ededed;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #FFFFFF;
	  padding: 10upx 30upx;
	  box-sizing: border-box;
	  .time_select{
		  width: 26%;
		  margin-right: 16upx;
		  height: 60upx;
		  border: none;
		  .select{
			  border: none;
			  width: 100%;
			  height: 100%;
			  font-size: 26upx;
		  }
	  }
	  .search_content {
		flex: 1;
		background:rgba(246,246,246,1);
		border-radius: 50upx;
	    color:rgba(207,207,207,1);
		// text-align: center;
	    // display: flex;
	    // justify-content: center;
	    .search_input{
			margin: 0 16upx;
	      background: url('https://static.xpandago.net/wechat/images/search_gray%402x.png') no-repeat left center;
	      background-size: 30upx;
	      padding-left: 40upx;
		  overflow: hidden;
		  font-size: 22upx;
		  line-height: 60upx;
		  overflow:hidden;
		  text-overflow:ellipsis;
		  display:-webkit-box;
		  -webkit-box-orient:vertical;
		  -webkit-line-clamp:1;
		  word-break: break-all;
	    }
	  }
	}
    .tab-h{
	  height: 80upx;
	  width: 100%; 
	  box-sizing: border-box;
	  overflow: hidden;
	  line-height: 80upx;
	  background: #ffffff;
	  font-size: 28upx; 
	  white-space: nowrap;
	  position: fixed;
	  top: 80upx; 
	  left: 0;
	  z-index: 99;
	  text-align: center;
	  color:rgba(51,51,51,1);
		.tab-item{
			margin:0 20upx;
			display: inline-block;
			width: 100upx;
		}
		.tab-item.active{
			color:rgba(219,194,145,1);
			border-bottom: 6upx solid #DBC191;
		}
	}
	.tab-content_main{
		margin-top: 160upx;
		overflow: hidden; 
		width: 100%;
	}
	.main_list{
		overflow: hidden;
		font-size: 28upx;
	  background: #ffffff;
	  padding: 20upx 30upx;
	  box-sizing: border-box;
		margin-top: 20upx;
		.main_list_top{
			border-bottom: 1px solid #ededed;
			padding: 0 0 15upx;
	    .list_top{
	      overflow: hidden;
	      	.main_list_top_fl{
	      	float: left;
	        font-size:26upx;
	        font-weight:bold;
	        color:rgba(51,51,51,1);
	        line-height:36upx;
	        .copy{
	          width: 36upx;
	          height:auto;
	          margin-left: 30upx;
	        }
	      }
	      .main_list_top_fr{
	      	float: right;
	        font-size:26upx;
	        color:rgba(219,193,145,1);
	        line-height:36upx;
	      }
	    }
		}
	
		.main_list_centent{
			.main_list_centent_list{
				overflow: hidden;
				border-bottom: 1px solid #ededed;
				padding: 20upx 0;
				.main_list_centent_fl{
					float: left;
					width: 136upx;
					max-height: 136upx;
					border:1px solid #ededed;
				}
				.main_list_centent_fr{
					width: calc(100% - 166upx);
					overflow: hidden;
					float: right;
					margin-left: 10upx;
					.main_list_centent_fr_name{
						overflow:hidden;
						text-overflow:ellipsis;
						line-height: 36upx;
						height: 72upx;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
					}
					.main_list_centent_fr_money{
					  overflow: hidden;
					  margin-top: 30upx;
					  .fr_money{
					    float: left;
					    font-size:30upx;
					    font-family:'DINCond';
					    font-weight:400;
					    color:rgba(51,51,51,1);
						display: flex;
						align-items: center;
						.costPoint{
						  background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
						  background-size: 24upx;
						  padding-left: 30upx;
						   font-size:34upx;
						   font-family:'DINCond';
						   font-weight:400;
						   color:rgba(219,194,145,1);
						   margin-right: 8upx;
						}
						.realPrice{
						  color:rgba(233,50,70,1);
						}
						.goodsNums{
						   color:rgba(153,153,153,1);
						 }
						.goodsNums.tes{
						  margin-left: 10upx;
						  transform: rotate(45deg);
						}
				  }
					  .zhuangtai{
						float: right;
						font-size:24upx;
						color:rgba(153,153,153,1);
						line-height:36upx;
					  }
					}
				}
			}
		}
		.main_list_bot{
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #ededed;
			padding: 10upx 0;
			.main_list_bot_fl{
				display: flex;
				text-align: left;
				width: 50%;
			}
			.main_list_bot_fr{
				width: 50%;
				.shouyi{
					display: flex;
					justify-content: flex-end;
					.shouyi-fl{
						margin-right: 8upx;
					}
					.shouyi-fr-jifen{
						background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
						background-size: 24upx;
						padding-left: 30upx;
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(219,194,145,1);
					}
					.shouyi-fr-jie{
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					.shouyi-fr-jingdan{
						font-size:30upx;
						font-family:'DINCond';
						font-weight:400;
						display: flex;
						color:rgba(233,50,70,1);
						.jifen{
							background: url('https://static.xpandago.net/wechat/images/jf_icon%402x.png') no-repeat left center;
							background-size: 24upx;
							padding-left: 30upx;
							font-size:30upx;
							font-family:'DINCond';
							font-weight:400;
							color:rgba(219,194,145,1);
							margin-right: 10upx;
						}
					}
				}
			}
			
		}
		.btn{
			text-align: right;
			margin-top: 20upx;
			
			text{
				display: inline-block;
				padding: 0 20upx;
				line-height: 56upx;
				border: 1px solid #070506;
				border-radius:28upx;
				font-size:24upx;
				color:rgba(7,5,6,1);
			}
		}
		.main_list_bot:last-child{
			border: none;
		}
	}
	movable-area {
		position: fixed;
		top: 30upx;
		right: 0upx;
		height: calc(100% - 30upx);
		width: 150upx;
		pointer-events: none;
		z-index: 8;
	
		movable-view {
			pointer-events: auto;
			width: 150upx;
			height: 60upx;
	
			.hidden {
				width: 150upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx 0 0 30upx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #CCCCCC;
				opacity: 0.8;
				.hidden_imgOne{
					width: 50upx;
					height: 50upx;
					background: url('https://static.xpandago.net/wechat/images/kejian_sj@2x.png') no-repeat center/100% 100%;
				}
				.hidden_imgTwo{
					width: 50upx;
					height: 50upx;
					background: url('https://static.xpandago.net/wechat/images/bukejian_sj@2x.png') no-repeat center/100% 100%;
				}
			}
		}
	}
</style>
<template>
	<view>
		<movable-area>
			<movable-view direction="all" x="300" y="225" out-of-bounds="true" damping="10">
				<view class="hidden">
					<view class="hidden_imgOne"  v-if="hide == 0" @tap="hideChange(1)"></view>
					<view class="hidden_imgTwo"  v-else-if="hide == 1" @tap="hideChange(0)"></view>
				</view>
			</movable-view>
		</movable-area>
		<view class="pos">
			<view class="time_select">
				<select class="select" v-model="memberType" @change="getCouponSelected">
					<option v-for="(x,i) in directlyList" :key="x.indexId" v-bind:value="x.indexId">{{x.name}}</option>
				</select>
			</view>
		    <navigator class="search_content" open-type="navigate" url="/pages/datail/orderSearch">
		      <view class="search_input">请输入商品名称、订单号、收件姓名、电话</view>
		    </navigator>
		</view>
		<view class="tab-h">
		    <view class="tab-item" :class="current == 0 ? 'active' : ''" @tap="swichNav(0)">全部</view>
		    <view class="tab-item" :class="current == 1 ? 'active' : ''" @tap="swichNav(1)">待发货</view>
		    <view class="tab-item" :class="current == 2 ? 'active' : ''" @tap="swichNav(2)">待收货</view>
			<view class="tab-item" :class="current == 3 ? 'active' : ''" @tap="swichNav(3)">已完成</view>
			<view class="tab-item" :class="current == 4 ? 'active' : ''" @tap="swichNav(4)">已取消</view>
	    </view>
		<view class="tab-content_main">
		  <view class="main_list" v-for="(item,i) in list" @tap="orderInfo(item.orginOrderNo,item.jumpButton)">
		      <view class="main_list_top">
		        <view class="list_top">
		          <view class="main_list_top_fl">
		            订单号:{{item.orderNo}}
					<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(item.orginOrderNo)" mode="widthFix"></image>
		          </view>
		          <view class="main_list_top_fr">
		            {{item.orderState}}
		          </view>
		        </view>
		      </view>
		      <view class="main_list_centent">
		        <view class="main_list_centent_list" v-for="(newitem,i) in item.commodityInfoList">
		          <image :src= "'https://static.xpandago.net'+'/'+newitem.goodImg" class="main_list_centent_fl" mode="widthFix"></image>
		          <view class="main_list_centent_fr">
		            <view class="main_list_centent_fr_name">
		              {{newitem.goodsName}}
		            </view>
		            <view class="main_list_centent_fr_money">
		              <view class="fr_money" v-if="newitem.costPoint!='' && newitem.costPoint!=null && newitem.costPoint>0">
		                <text class="costPoint">{{newitem.costPoint}}</text>
		                <text> + ¥ {{newitem.realPrice}}</text>
		                <text class="goodsNums tes">+</text>
		                <text class="goodsNums">{{newitem.goodsNums}}</text>
		              </view>
		            <view class="fr_money" v-else>
		                <view>¥ {{newitem.realPrice}}</view>
		                <text class="goodsNums tes">+</text>
		                <text class="goodsNums">{{newitem.goodsNums}}</text>
		              </view>
		              <view class="zhuangtai" v-if="newitem.goodsState==1">售后中</view>
		              <view class="zhuangtai" v-else-if="newitem.goodsState==2">售后成功</view>
		            </view>
		          </view>
		        </view>
		      </view>
		     <view class="main_list_bot">
				 <view class="main_list_bot_fl">共{{item.commoditySum}}件</view>
				 <view class="main_list_bot_fr">
					 <view class="shouyi" v-if="item.goodsTotalPoint!='' && item.goodsTotalPoint!=null && item.goodsTotalPoint!=0">
						 <view class="shouyi-fl">积分收益:</view>
						 <view class="shouyi-fr-jifen">{{item.goodsTotalPoint}}</view>
					 </view>
					 <view class="shouyi">
						 <view class="shouyi-fl">预计收益:</view>
						 <view class="shouyi-fr-jie" v-if="hide == 0">¥ {{item.estimatedIncome}}</view>
						 <view class="shouyi-fr-jie" v-else-if="hide == 1">¥ {{item.estimatedIncomeFlag}}</view>
					 </view>
				 </view>
		      </view>
			  <view class="main_list_bot">
				 <view class="main_list_bot_fl">
					 <!-- <view class="userName" v-if="item.jumpButton != 1">下单人： {{item.userName}} {{item.userPhone}}</view> -->
					 <view class="userName">下单人： {{item.userName}} {{item.userPhone}}</view>
				 </view>
				 <view class="main_list_bot_fr">
					 <view class="shouyi">
						 <view class="shouyi-fl">订单总额:</view>
						 <view class="shouyi-fr-jingdan" v-if="hide == 0"><view class="jifen" v-if="item.costPoint>0 && item.costPoint!=null">{{item.costPoint}} +</view>¥ {{item.orderTotal}}</view>
						 <view class="shouyi-fr-jingdan" v-else-if="hide == 1"><view class="jifen" v-if="item.costPoint>0 && item.costPoint!=null">{{item.costPointFlag}} +</view>¥ {{item.orderTotalFlag}}</view>
					 </view>
				 </view>
			   </view>
			   <view class="btn" v-if="item.btnWl == 1">
				   <text @tap.stop="openLogistics(item.orderId)">查看物流</text>
			   </view>
		  </view>
		  <view class="uni-loadmore" v-if="showLoadMore==true">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import segmentedControl from '@/components/segmented-control';
	export default {
		components: {
			segmentedControl
		},
		data() {
			return {
				hide: 0, // 0 显示  1 隐藏
				memberType:'all',//选择级别
				directlyList:[
					{name:"全部订单",indexId: 'all'},
					{name:"收益订单",indexId: 'income'},
					{name:"其他订单",indexId: 'team'},
				],
				list:[],
				current: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				totalPage:'',//总页数
				page:1,
				status:'',
				token:''
			}
		},
		onLoad() {
			// this.token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLnhornjKtRVUVFTiIsImF1ZGllbmNlIjoiZTEwYWRjMzk0OWJhNTlhYmJlNTZlMDU3ZjIwZjg4M2UiLCJ1c2VyX2lkIjozMDI2MzEsImNyZWF0ZWQiOjE2Mzg5NTEzNzU5MjAsImV4cCI6MTY0MTU0MzM3NSwidXNlcl9ncm91cF9pZCI6bnVsbCwicGxhdGZvcm0iOm51bGx9.3LrnVZVL7UoaEgINIewYdENqwteUYXSB6Ty0rDvCYt7Bggc8w45m0rsAFHyHNqCxMc5s7VHwunbIQZCvtpwAnQ'
			// let token = this.token
			// uni.setStorageSync('token', token)
			
			this.token=uni.getStorageSync('token')
			this.newList(this.page)
		},
		onReachBottom() {
			this.showLoadMore = true;
			if(this.totalPage == 0){
				return false
			}
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				this.loadMoreText = "加载中..."
				setTimeout(() => {
					this.page++
					this.newList(this.page)
				}, 500);
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			// this.current=0
			this.page=1
			this.list=[]
			// this.status=''
			this.newList(this.page)
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			hideChange(index){
				this.hide = index
			},
			getCouponSelected(){
				// this.memberType
				this.page=1;
				this.list = [];
				this.newList(this.page)
			},
			openLogistics(orderId){
				uni.navigateTo({
				  url: "/pages/datail/logistics?orderId=" + orderId
				})
			},
			async newList(page){
				const [err, res] = await api.orderDetailsList({
					query: {
						status:this.status,
						queryType: this.memberType,
						page: page,
						limit:10
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 if(Boolean(res.data.data.list) != false){
						 this.list = [...this.list, ...res.data.data.list];
					 }
					 this.list.forEach(v => {
						 v.estimatedIncomeFlag = '--'
						 v.costPointFlag = '--'
						 v.orderTotalFlag = '--'
					 })
					 this.totalPage=res.data.data.totalPage
					  if(res.data.data.totalPage == 0){
					 	 this.showLoadMore = true;
					 	  this.loadMoreText = "暂无数据!"
						 }else{
							this.showLoadMore = false; 
						 }
					  
				 }
			},
			//复制粘贴
			copy(copy){
			  uni.setClipboardData({
			    data:copy,
			    success (res) {
			      uni.showToast({
			        title: '复制成功',
			        icon:"none"
			      })
			    }
			  })
			},
			//跳转详情
			orderInfo(orderNo,jumpButton){
				// console.log(orderNo)
				// if(jumpButton == 1){
				// 	return false
				// }
				uni.navigateTo({
				  url: "/pages/datail/orderDetailsInfo?orderNo="+orderNo
				})
			},
			//tab切换
			swichNav(type){
				if(type==0){
					this.current=0
					this.page=1
					this.list=[]
					this.status=''
					this.newList(this.page)
				}else if(type==1){
					this.current=1
					this.page=1
					this.list=[]
					this.status='2'
					this.newList(this.page)
				}else if(type==2){
					this.current=2
					this.page=1
					this.list=[]
					this.status='8'
					this.newList(this.page)
				}else if(type==3){
					this.current=3
					this.page=1
					this.list=[]
					this.status='5'
					this.newList(this.page)
				}else if(type==4){
					this.current=4
					this.page=1
					this.list=[]
					this.status='3'
					this.newList(this.page)
				}
			}
		}
	}
</script>
